<template>
  <div>
    <el-dialog
      width="90%"
      top="5vh"
      title="The Promoter Promotes The Record In Detail"
      :visible.sync="show"
    >
      <r-search
        ref="search"
        :searchData="searchData"
        :searchForm="searchForm"
        :searchHandle="searchHandle"
        :inline="true"
      />
      <r-table
        :isPagination="true"
        :isHandle="true"
        :tableData="tableData"
        :tableCols="tableCols"
        :tablePage="pagination"
        :loading="tableLoading"
        :tableHandles="tableHandles"
        :isSelection="false"
        @refresh="page()"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Abnormal_record",
  data() {
    return {
      searchData: {
        isConsume: null
      },
      searchForm: [
        {
          type: "select",
          placeholder: "User Status",
          prop: "isConsume",
          width: 240,
          options: [
            { label: "Nonactivated", value: 0 },
            { label: "Activated", value: 1 }
          ]
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.pagination.offset = 1;
            this.pagination.limit = 10;
            this.pagination.total = 0;
            this.getData();
          }
        }
      ],

      show: false,
      row: {},
      tableLoading: false,
      tableData: [],
      tableHandles: [],
      pagination: { limit: 10, offset: 1, total: 0 },
      tableCols: [
        { label: "Phone", prop: "phone" },
        { label: "User Name", prop: "trueName" },
        {
          label: "User Status",
          prop: "isConsume",
          formatter: e => (e.isConsume == 1 ? "Activated" : "Nonactivated"),
          itemClass: e =>
            e.isConsume == 0 ? "danger" : e.isConsume == 1 ? "success" : ""
        },
        { label: "Consumption Time", prop: "consumeTime" },
        { label: "Creation Time", prop: "ctime" }
      ]
    };
  },
  watch: {
    "pagination.offset": {
      handler(newValue) {
        if (newValue) {
          this.getData();
        }
      },
      deep: true // 深度监听
    },
    "pagination.limit": {
      handler(newValue) {
        if (newValue) {
          this.getData();
        }
      },
      deep: true // 深度监听
    }
  },
  created() {
    this.show = false;
  },
  mounted() {},
  methods: {
    page() {
      this.getData();
    },
    async getData() {
      let page = {
        isConsume: this.searchData.isConsume,
        pageSize: this.pagination.limit,
        pageNum: this.pagination.offset,
        promotionId: this.row.id
      };
      let res = await this.apis.promotionPromotionRecord(page);
      this.tableData = res.rows || [];
      this.pagination.total = res.total;
    },
    show_fun(row) {
      // console.log(222, row);
      this.pagination.offset = 1;
      this.pagination.limit = 10;
      this.pagination.total = 1;
      this.searchData.isConsume = null;
      this.row = row;
      this.show = true;
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
